<template>
  <view>
    <a-navbar title="导航栏" isborder left-arrow></a-navbar>
    <view class="tag-demo">
      <a-card title="基本用法">
        <div class="divider-demo">
          <p>
            A design is a plan or specification for the construction of an
            object.
          </p>
          <a-divider />
          <p>
            A design is a plan or specification for the construction of an
            object.
          </p>
          <a-divider dashed />
          <p>
            A design is a plan or specification for the construction of an
            object.
          </p>
          <a-divider :size="2" style="border-bottom-style: dotted" />
          <p>
            A design is a plan or specification for the construction of an
            object.
          </p>
        </div>
      </a-card>
      <a-card title="带有文字的分割线">
        <div class="divider-demo">
          <p>
            A design is a plan or specification for the construction of an
            object.
          </p>
          <a-divider orientation="left">Text</a-divider>
          <p>
            A design is a plan or specification for the construction of an
            object.
          </p>
          <a-divider orientation="center">Text</a-divider>
          <p>
            A design is a plan or specification for the construction of an
            object.
          </p>
          <a-divider orientation="right">Text</a-divider>
          <a-divider :margin="10"><icon-star /></a-divider>
        </div>
      </a-card>
      <a-card title="竖直分割线">
        <div class="divider-demo">
          <span>Item 1</span>
          <a-divider direction="vertical" />
          <span>Item 2</span>
          <a-divider direction="vertical" />
          <span>Item 3</span>
        </div>
      </a-card>
    </view>
    <a-back-top :scroll-top="scrollTop">
      <!-- <a-button>UP</a-button> -->
    </a-back-top>
  </view>
</template>

<script lang="ts" setup>
import { onPageScroll } from "@dcloudio/uni-app";
import { ref } from "vue";

const scrollTop = ref<number>(0);
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});
</script>

<style lang="scss">
.tag-demo {
  padding: 0px 30rpx;
}

.divider-demo {
  box-sizing: border-box;
  width: 100%;
  padding: 24px;
  border: 30px solid rgb(var(--gray-2));
}
.half-divider {
  left: 55px;
  width: calc(100% - 55px);
  min-width: auto;
  margin: 16px 0;
}
.flex-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-box .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 16px;
  color: var(--color-text-2);
  font-size: 16px;
  background-color: var(--color-fill-3);
  border-radius: 50%;
}
.flex-box .content {
  flex: 1;
  color: var(--color-text-2);
  font-size: 12px;
  line-height: 20px;
}

:deep(.arco-card) {
  margin-bottom: 30rpx;
}
</style>
